<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <!-- nav 是头+脖子 -->
    <div class="nav">
        <!-- 标题首行 -->
        <header>
            <!-- 标题行内置一个盒子 -->
            <div class="box">

                <!-- 左侧 -->
                <li class="li1">
                    品优购欢迎您！
                    <a href="#1">请登录 </a>
                    <span><a href="registered.html">免费注册</a></span>
                </li>
                <div class="box1">
                    <li>我的订单 </li>
                    <li>|</li>
                    <li class="stylecss">我的品优购</li>
                    <li>|</li>
                    <li>品优购会员</li>
                    <li>|</li>
                    <li>企业采购</li>
                    <li>|</li>
                    <li class="stylecss">关注品优购</li>
                    <li>|</li>
                    <li class="stylecss">客户服务</li>
                    <li>|</li>
                    <li class="stylecss">网站导航</li>
                </div>
            </div>
        </header>
        <!-- 头部制作完成 -->

        <!-- 脖子制作 -->
        <div class="bozi">
            <!-- 中间 -->
            <div class="bozi-zhong">
                <!-- logo -->
                <img src="./logo.png" alt="">
                <!-- 搜索 -->


                <div class="search">
                    <input type="search" id="">
                    <input type="submit" name="" id="">
                </div>
                <!-- 搜索下面的盒子 -->
                <div class="sousuoxiamian">
                    <li>优惠购首发</li>
                    <li> 1</li>
                    <li>亿元优惠</li>
                    <li> 1</li>
                    <li>9.9元团购</li>
                    <li> </li>
                    <li>美满99减30</li>
                    <li> </li>
                    <li>办公用品</li>
                    <li> </li>
                    <li>电脑</li>
                    <li> </li>
                    <li>通信</li>
                </div>



                <!-- 我的购物车 -->
                <div class="gouwuche">
                    <span>我的购物车</span>
                    <!-- 80个购物商品 -->
                    <div class="bashi">80</div>
                </div>

            </div>
            <!-- 下面 -->
            <div class="bozi-xiamian">
                <!-- 左 -->
                <div class="left">全部商品分类</div>
                <!-- 右 -->
                <div class="right">
                    <li>服装城 </li>
                    <li>美妆馆</li>
                    <li>传智超市</li>
                    <li>全球购闪购团购</li>
                    <li>拍卖</li>
                    <li>有趣</li>
                </div>
            </div>
        </div>
    </div>
    <!-- 身体 -->
    <div class="box123">
    <div class="body">
        <div class="body-shang">
            <div class="body-shang-left">
                <li>家用电器</li>
                <li>手机、数码 通信</li>
                <li>电脑、办公</li>
                <li>家居、家具 家装 厨具</li>
                <li>男装 女装 童装 内衣</li>
                <li>个户化妆 清洁用品 宠物</li>
                <li>鞋靴 箱包 珠宝 奢侈品</li>
                <li>运动户外 钟表</li>
                <li>汽车 汽车用品</li>
                <li>母婴 玩具乐器</li>
                <li>食品 酒类 生鲜 特产</li>
                <li>医药保健</li>
                <li>图书 音像、电子书</li>
                <li>彩票 旅行、充值 票务</li>
                <li>理财 众筹 白条 保险</li>
            </div>
            <div class="body-shang-middle">

                <!-- <img src="./focus3.jpg" alt=""> -->
            </div>
            <div class="body-shang-right">
                <div class="top">
                    <div class="box1">
                        <ul>
                            <li class="li1">品优购快报</li>
                            <li class="li2">更多</li>
                        </ul>
                    </div>
                    <div class="box2">
                        <li>【特惠】爆款耳机5折秒!</li>
                        <li>【特惠】母亲节,健康好礼低至5折!</li>
                        <li>【特惠】爆款耳机5折秒!</li>
                        <li>【特惠】 9.9元洗100张照片!</li>
                        <li>【特事】长虹智能空调立省1000</li>
                    </div>
                    <div class="box3">
                        <ul>
                            <li><a href="#">话费</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                            <li><a href="#">机票</a></li>
                        </ul>
                    </div>
                </div>
                <div class="bottom">
                    <img src="./身体中右下.jpg" alt="">
                </div>
            </div>

        </div>
        <!-- 肚子 -->
        <div class="duzi">
            <div class="left">
                <div class="rig">今日推荐</div>
            </div>
            <div class="right">
                <li><img src="./pic.jpg" alt=""></li>
                <li><img src="./pic.jpg" alt=""></li>
                <li><img src="./pic.jpg" alt=""></li>
                <li><img src="./pic.jpg" alt=""></li>
            </div>

        </div>
    </div>
    <!-- 腿 -->
    <div class="leg">
        <!-- 裤腰带 -->
        <div class="belt">
            <div class="right">
                <li>热门</li>
                <li>|</li>
                <li>大家电</li>
                <li>|</li>
                <li>生活电器</li>
                <li>|</li>
                <li>厨房电器</li>
                <li>|</li>
                <li>个护健康</li>
                <li>|</li>
                <li>应季电器</li>
                <li>|</li>
                <li>空气/净水</li>
                <li>|</li>
                <li>新奇特</li>
                <li>|</li>
                <li>高端电器</li>
            </div>
            <div class="left">
                <li>家用电器</li>
            </div>

        </div>
        <!-- 裤子 -->
        <div class="trousers">
            <div class="box1">
                <div class="top">
                    <li>节能补贴</li>
                    <li>4K电视</li>
                    <li>空气净化器</li>
                    <li>IH电饭煲</li>
                    <li>滚筒洗衣机</li>
                    <li>热水器</li>
                </div>
                <div class="bottom">
                    <img src="./floor-1-1.png" alt="">
                </div>
            </div>

            <div class="box2"><img src="./floor-1-b01.png" alt=""></div>

            <div class="box3">
                <div class="top"><img src="./floor-1-2.png" alt=""></div>
                <div class="bottom"><img src="./floor-1-3.png" alt=""></div>
            </div>

            <div class="box4">
                <img src="./floor-1-4.png" alt="">
            </div>

            <div class="box5">
                <div class="top"><img src="./floor-1-5.png" alt=""></div>
                <div class="bottom"><img src="./floor-1-6.png" alt=""></div>
            </div>
        </div>
    </div>
            <!-- 脚 -->
        <div class="foot">
            <div class="foot-bottom">
                <div class="box-top">
                    <li>
                        <p>正品保障</p>
                        <span>正品保障，提供发票</span>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <span>正品保障，提供发票</span>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <span>正品保障，提供发票</span>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <span>正品保障，提供发票</span>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <span>正品保障，提供发票</span>
                    </li>
                </div>
                <div class="box-middle">
                    <div class="box1">
                        <div>
                            <li>购物指南</li>
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>大家电话联系客服</li>
                        </div>
                    </div>
                    <div class="box2">
                        <div>
                            <li>购物指南</li>
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>大家电话联系客服</li>
                        </div>
                    </div>
                    <div class="box3">
                        <div>
                            <li>购物指南</li>
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>大家电话联系客服</li>
                        </div>
                    </div>
                    <div class="box4">
                        <div>
                            <li>购物指南</li>
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>大家电话联系客服</li>
                        </div>
                    </div>
                    <div class="box5">
                        <div>
                            <li>购物指南</li>
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>大家电话联系客服</li>
                        </div>
                    </div>
                    <div class="box6">
                        <li class="help">帮助中心</li>
                        <li><img src="./erweima.png" alt=""></li>
                        <li>品优购客户端</li>
                    </div>
                </div>
                <div class="box-bottom">
                    <div>
                        <p>关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p>
                        <!-- <li>关于我们</li>
                        <li>联系我们</li>
                        <li>联系客服</li>
                        <li>商家入驻</li>
                        <li>营销中心</li>
                        <li>手机品优购</li>
                        <li>友情链接</li>
                        <li>销售联盟</li>
                        <li>品优购社区</li>
                        <li>品优购公益</li>
                        <li>English Site</li>
                        <li>Contact U</li> -->
                    </div>
                    <div><p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
                        京ICP备08001421号京公网安备110108007702</p></div>
                </div>
            </div>
        </div>
    </div>
<!-- 侧边固定 -->
<div class="sidefixed">
    <li>家用电器</li>
    <li>手机通讯</li>
    <li>手机通讯</li>
    <li>手机通讯</li>
</div>
</body>

</html>